<template>
    <div id="MyDateTimePicker">
      <pd-select-box style="position: fixed;bottom: 0;width: 100%">
        <pd-select-item ref="year" :listData="yearList" v-model="year"></pd-select-item>
        <pd-select-item ref="month" :listData="monthList" type="cycle" v-model="month"></pd-select-item>
        <pd-select-item ref="day" :listData="dayList" type="cycle" v-model="day"></pd-select-item>
      </pd-select-box>
    </div>
</template>

<script>
export default {
  name: 'MyDateTimePicker',
  data () {
    return {
      yearList: [],
      monthList: [],
      dayList: [],
      year: '1970年',
      month: '1月',
      day: '1日'
    }
  },
  mounted () {
    // setTimeout(() => {
    //   // 验证 model 联动
    //   this.after()
    // }, 3000)
  },
  created () {
    const now = new Date()
    this.yearList = Array.from({length: now.getFullYear() - 1970 + 1}, (value, index) => (1970 + index) + '年')
    this.year = now.getFullYear() + '年'
    this.monthList = Array.from({length: 12}, (value, index) => index + 1 + '月')
    this.month = now.getMonth() + 1 + '月'
    // this.dayList = Array.from({length: this.getDaysOfMonth(now.getFullYear(), now.getMonth() + 1)}, (value, index) => index + 1 + '日')
    this.day = now.getDate() + '日'
  },
  methods: {
    after () {
      this.day = 'customValue0'
      this.$refs.day.init()
    },
    getDaysOfMonth (year, month) {
      const date = new Date(year, month, 0)
      const days = date.getDate()
      return days
    }
  },
  watch: {
    'year': function (value) {
      const cmonth = this.month
      const yearNum = parseInt(value.substring(0, value.length - 1))
      const monthNum = parseInt(cmonth.substring(0, cmonth.length - 1))
      this.dayList = Array.from({length: this.getDaysOfMonth(yearNum, monthNum)}, (value, index) => index + 1 + '日')
      debugger
    }
  }
}
</script>

<style scoped>

</style>
